<template>
    <div>
        <el-form ref="emergencyDisasterRef" :model="form2" label-width="150px" style="padding:0 40px 0px 20px">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="任务名称" prop="taskName">
                        {{ form2.taskName }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="最新维护人" prop="maintainer">
                        {{ form2.maintainer }}
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="最新维护时间" prop="maintainTime">
                        {{ form2.maintainTime }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="行政区划分析级别" prop="isCity" @change="changeCity">
                        <el-radio-group v-model="form2.isCity">
                            <el-radio label="0">按区县</el-radio>
                            <el-radio label="1">按地市</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            <template v-if="form2.isCity == '0'">
                <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane v-for="(item, index) in form2.areaList" :key="index"
                        :label="item.province == item.city ? item.province + item.area : item.province + item.city + item.area"
                        :name="index">
                        <el-form-item label="地震应急组织体系和预案体系" :prop="`areaList.` + index + '.emergencySystem'"
                            :rules="rules.emergencySystem">
                            <el-input v-model="item.emergencySystem" placeholder="请输入地震应急组织体系和预案体系" type="textarea"
                                :rows="5" maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="地震应急工作机制" :prop="`areaList.` + index + '.emergencyWorkingMechanism'"
                            :rules="rules.emergencyWorkingMechanism">
                            <el-input v-model="item.emergencyWorkingMechanism" placeholder="请输入地震应急工作机制" type="textarea"
                                :rows="5" maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="应急物资储备" :prop="`areaList.` + index + '.emergencySuppliesReserve'"
                            :rules="rules.emergencySuppliesReserve">
                            <el-input v-model="item.emergencySuppliesReserve" placeholder="请输入应急物资储备" type="textarea"
                                :rows="5" maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="应急救援力量" :prop="`areaList.` + index + '.emergencyRescueForce'"
                            :rules="rules.emergencyRescueForce">
                            <el-input v-model="item.emergencyRescueForce" placeholder="请输入应急救援力量" type="textarea" :rows="5"
                                maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="应急避难场所" :prop="`areaList.` + index + '.emergencyShelter'"
                            :rules="rules.emergencyShelter">
                            <el-input v-model="item.emergencyShelter" placeholder="请输入应急避难场所" type="textarea" :rows="5"
                                maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="重点目标保障能力" :prop="`areaList.` + index + '.supportability'"
                            :rules="rules.supportability">
                            <el-input v-model="item.supportability" placeholder="请输入重点目标保障能力" type="textarea" :rows="5"
                                maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="谣言、舆情应急能力" :prop="`areaList.` + index + '.rumorEmergencyCapacity'"
                            :rules="rules.rumorEmergencyCapacity">
                            <el-input v-model="item.rumorEmergencyCapacity" placeholder="请输入谣言、舆情应急能力" type="textarea"
                                :rows="5" maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="科普宣教和演练" :prop="`areaList.` + index + '.popularization'"
                            :rules="rules.popularization">
                            <el-input v-model="item.popularization" placeholder="请输入科普宣教和演练" type="textarea" :rows="5"
                                maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="其他地方特征应急准备措施">
                            <el-input v-model="item.otherMeasures" placeholder="请输入其他地方特征应急准备措施" type="textarea" :rows="5"
                                maxlength="2000" show-word-limit />
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
            </template>
            <template v-else>
                <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane v-for="(item, index) in form2.areaList" :key="index"
                        :label="item.province == item.city ? item.city : item.province + item.city" :name="index">
                        <el-form-item label="地震应急组织体系和预案体系" :prop="`areaList.` + index + '.emergencySystem'"
                            :rules="rules.emergencySystem">
                            <el-input v-model="item.emergencySystem" placeholder="请输入地震应急组织体系和预案体系" type="textarea"
                                :rows="5" maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="地震应急工作机制" :prop="`areaList.` + index + '.emergencyWorkingMechanism'"
                            :rules="rules.emergencyWorkingMechanism">
                            <el-input v-model="item.emergencyWorkingMechanism" placeholder="请输入地震应急工作机制" type="textarea"
                                :rows="5" maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="应急物资储备" :prop="`areaList.` + index + '.emergencySuppliesReserve'"
                            :rules="rules.emergencySuppliesReserve">
                            <el-input v-model="item.emergencySuppliesReserve" placeholder="请输入应急物资储备" type="textarea"
                                :rows="5" maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="应急救援力量" :prop="`areaList.` + index + '.emergencyRescueForce'"
                            :rules="rules.emergencyRescueForce">
                            <el-input v-model="item.emergencyRescueForce" placeholder="请输入应急救援力量" type="textarea" :rows="5"
                                maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="应急避难场所" :prop="`areaList.` + index + '.emergencyShelter'"
                            :rules="rules.emergencyShelter">
                            <el-input v-model="item.emergencyShelter" placeholder="请输入应急避难场所" type="textarea" :rows="5"
                                maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="重点目标保障能力" :prop="`areaList.` + index + '.supportability'"
                            :rules="rules.supportability">
                            <el-input v-model="item.supportability" placeholder="请输入重点目标保障能力" type="textarea" :rows="5"
                                maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="谣言、舆情应急能力" :prop="`areaList.` + index + '.rumorEmergencyCapacity'"
                            :rules="rules.rumorEmergencyCapacity">
                            <el-input v-model="item.rumorEmergencyCapacity" placeholder="请输入谣言、舆情应急能力" type="textarea"
                                :rows="5" maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="科普宣教和演练" :prop="`areaList.` + index + '.popularization'"
                            :rules="rules.popularization">
                            <el-input v-model="item.popularization" placeholder="请输入科普宣教和演练" type="textarea" :rows="5"
                                maxlength="2000" show-word-limit />
                        </el-form-item>
                        <el-form-item label="其他地方特征应急准备措施">
                            <el-input v-model="item.otherMeasures" placeholder="请输入其他地方特征应急准备措施" type="textarea" :rows="5"
                                maxlength="2000" show-word-limit />
                        </el-form-item>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </el-form>
    </div>
</template>

<script setup>
import { getArea } from "@/api/suggestions/analyse.js";
const { proxy } = getCurrentInstance();
const emit = defineEmits();
const props = defineProps({
    form2: {
        default: {},
        type: Object,
    },
});
const activeName = ref(0)
const data = reactive({
    rules: {
        emergencySystem: [{ required: true, message: "请输入地震应急组织体系和预案体系", trigger: 'blur', }],
        emergencyWorkingMechanism: [{ required: true, message: "请输入地震应急工作机制", trigger: 'blur' }],
        emergencySuppliesReserve: [{ required: true, message: '请输入应急物资储备', trigger: 'blur' }],
        emergencyRescueForce: [{ required: true, message: '请输入应急救援力量', trigger: 'blur' }],
        emergencyShelter: [{ required: true, message: "请输入应急避难场所", trigger: "blur" }],
        supportability: [{ required: true, message: '请输入重点目标保障能力', trigger: 'blur' }],
        rumorEmergencyCapacity: [{ required: true, message: '请输入谣言、舆情应急能力', trigger: 'blur' }],
        popularization: [{ required: true, message: '请输入科普宣教和演练', trigger: 'blur' }],
    }
})
const { rules } = toRefs(data)
const { form2 } = toRefs(props)

// 初始下标
function initActiveName() {
    activeName.value = 0;
}

function changeCity() {
    console.log(form2.value.isCity, '改变县市');
    activeName.value = 0
    getAreaData({ flag: form2.value.isCity, taskDistrict: form2.value.taskDistrict, suggestionName: '应急备灾对策', taskNum: form2.value.taskNum })
}

// 获取 区县或者地市
function getAreaData(isCity) {
    getArea(isCity).then(response => {
        emit("changeAreaList2", response.data['应急备灾对策']);
    })
}

function getAreaList2() {
    emit("getAreaList2", form2.value.areaList);
}
function handleClick(tab, event) {
    // console.log(tab, event)
}

defineExpose({
    getAreaList2,
    initActiveName
})
</script>